import './user.css';
import React, {useEffect} from 'react';
import {Avatar, Button, List, Popconfirm, Skeleton, Space, Tag} from 'antd';

import {UserStore} from "../stores/user";
import {observer} from "mobx-react-lite";
import UserModal from "./userModal";
import {UserItem} from "../interface";


const UserList = observer(() => {
    const store = UserStore();
    const {dataList, loading, showModal, currentRecord} = store;

    useEffect(() => {
        console.log("模拟componentDidMount，即只运行一次该函数");
        queryList()
    }, [store]);

    const deleteUser = (record: any) => {
        console.log('delete', record);
        store.deleteUser(record.id).then(() => {
            queryList();
        });
    };
    const updateUser = (record: any) => {
        console.log('updateUser', record);
        const currentRecord = {"id": record.id, "name": record.name, "age": record.age, "address": record.address};
        store.openModal(true, currentRecord);
    };

    const openModal = () => {
        store.openModal(true);
    };
    const queryList = () => {
        store.changeLoading(true);
        store.fetchUsers();
        store.changeLoading(false);
    }

    const modalProps = {
        open: showModal,
        currentRecord,
        onCreate: (values: any) => {
            console.log('Received values of form: ', values);
            store.createUser(values).then(() => {
                // store.openModal(false);
            });
        },
        onUpdate: (id: number, values: any) => {
            console.log('Received values of form: ', id, values);
            store.updateUser(id, values).then(() => {
                store.openModal(false);
                queryList();
            });
        },
        close: () => {
            store.openModal(false);
        }
    }

    const onLoadMore = () => {
    };
    const loadMore = null;

    return (<>
            <Space style={{marginBottom: 1}}>
                <Tag color="magenta">存在用户：{store.userCount}</Tag>
                <Button type="primary" style={{marginRight: 10, paddingRight: 10}} onClick={openModal}>新增</Button>
            </Space>
            <List
                className="demo-loadmore-list"
                loading={loading}
                itemLayout="horizontal"
                loadMore={loadMore}
                dataSource={dataList}
                renderItem={(item: UserItem, index) => (
                    <List.Item
                        actions={[
                            <Button type="primary" onClick={() => updateUser(item)}>编辑</Button>,
                            <Popconfirm
                                title="是否删除"
                                description="您确定要删除此用户?"
                                onConfirm={() => deleteUser(item)}
                                okText="确认"
                                cancelText="取消"
                            >
                                <Button danger>删除</Button>
                            </Popconfirm>
                        ]}
                    >
                        <Skeleton avatar title={false} loading={item.loading} active>
                            <List.Item.Meta
                                avatar={<Avatar
                                    src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`}/>}
                                title={<a href="https://ant.design">{item.name}</a>}
                                description={`地址：${item.address == null ? '' : item.address}`}
                            />
                            <div>{item.age}岁</div>
                        </Skeleton>
                    </List.Item>
                )}
            />
            <UserModal {...modalProps}/>
        </>
    )
});

export default UserList;
